<html lang="en-us">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js">
        </script>
        <title>Pickup Map Mobile Check In</title>
        <style type="text/css">        
            body {
                margin: 0px;
                padding: 0px;
            }
            
            .title {
                font-family: Arial, Helvetica, sans-serif;
                border-bottom: 1px #CCC solid;
                color: #000;
                display: block;
                padding: 10px;
                font-weight: bold;
                text-align: center;
                font-size: 18px;
                background-color: #7C92AE;
                background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ABB9CB), color-stop(0.5, #8C9FB8), color-stop(0.51, #7C92AE), to(#6C85A4));
                                    }
                                    
                                    .dropList {
                                    	font-family:Arial, Helvetica, sans-serif;
                                        border: 1px #CCC solid;
                                        color: #000;
                                        height:40px;
                                        font-weight: bold;
                                        padding: 10px;
                                        text-decoration: none;
                        				width:90%;
                        				font-size:18px;
                        				
                        				margin-top:10px;
                                    }
                        			.checkbox{
                        				width:20px;
                        				height:20px;
                        				margin-top:15px;
                        			}
                        			.checkboxLabel{
                        				font-family:Arial, Helvetica, sans-serif;
                        				font-size:18px;
                        				font-weight:bold;
                        			}
                                .button{
                                	height:45px;
            						width:90%;
            						font-size:18px;
            						color:#fff;
            						margin-top:15px;
									margin-bottom:15px;
            						
            						display:inline-block;
            						background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(74,74,74,0.85)), color-stop(0.5, rgba(20,20,20,0.75)), color-stop(0.5, rgba(2,2,2,0.75)), to(rgba(14,14,14,0.75)));
                                }
                    
        </style>
        <script type="text/javascript">
            $(document).ready(function(){
            
                $('#submit').click(function(){
                    //alert('submit button was clicked');
                    var sportValue = $('#sport').val();
                    alert('sport value is: ' + sportValue.toString());
                });
            });
        </script>
    </head>
    <body>
        <label id="title" class="title">
            Pickup Map Check In
        </label>
        <div id="UIWrapper" style="text-align:center;">
            <div>
                <select id="sport" class="dropList">
                    <option value="" selected="selected">Select Sport:</option>
                    <option value="basketball">Basketball</option>
                    <option value="baseball">Baseball</option>
                    <option value="soccer">Soccer</option>
                    <option value="ultimate">Ultimate Frisbee</option>
                    <option value="rugby">Rugby</option>
                    <option value="kickball">Kickball</option>
                    <option value="dodgeball">Dodgeball</option>
                </select>
            </div>
            <div>
                <select id="skill" class="dropList">
                    <option value="" selected="selected">Select Skill Level:</option>
                    <option value="anything_goes">Anything goes</option>
                    <option value="casual">Casual</option>
                    <option value="competitive">Competitive</option>
                </select>
            </div>
            <div>
                <select id="duration" class="dropList">
                    <option value="" selected="selected">Select Duration:</option>
                    <option value="30">30 min</option>
                    <option value="60">60 min</option>
                    <option value="90">1hr 30 min</option>
                    <option value="120">2hr</option>
                    <option value="150">2hr 30min</option>
                    <option value="180">3hr</option>
                </select>
            </div>
			
            <input type="checkbox" id="checkbox" class="checkbox">
            <label class="checkboxLabel">
                I have equipment
            </label>
            </input>
            <div>
                <button id="submit" class="button">
                    Create Event
                </button>
            </div>
			
        </div>
		
    </body>
</html>
